<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看客户信息</title>
    <style>
        .workplace {
            padding-top: 15px;
        }

        .active {
            border-bottom: 2px rgb(250, 250, 97) solid;
        }

        .contentss:hover .submenu {
            /* 在鼠标移动到contentess的时候，期内submenu显示下面的效果 */
            display: block;
        }

        /* 查询条件区域 */
        .row1 {
            margin-left: 20px;
            margin-right: 20px;
            display: grid;
            /* grid比flex在排整齐的格式方面要强大很多 */
            grid-template-columns: 2fr 1fr 1fr 150px;
            /* 这行代码指定了grid的形态，也是用这行代码选择其他形态 */
            /* fr只是一个比例而已，fraction */
            gap: 15px;
            /* 网格间距宽度 */
        }

        .input {
            padding: 8px;
        }

        .btn-1 {
            background-color: pink;
            color: rgb(0, 5, 9);
            border: 0px;
            text-align: center;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px black solid;

        }

        .btn-1:hover {
            background-color: bisque;
        }

        table {
            margin-top: 15px;
            width: 100%;
            border-collapse: collapse;

        }

        .table1 {
            margin-left: 20px;
            margin-right: 20px;
        }

        /* 表格是一个整齐划一的标签，单元格没有margin，
        无法单个设置单元格。消除空隙必须控制table */
        th {
            border: 1px solid;
            color: black;
            text-align: center;
            padding: 8px;
            font-weight: bold;
        }

        td {
            text-align: left;
            border: 1px solid;
            color: black;
            text-align: center;
            padding: 8px;

        }


        .line1 {
            padding-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .line1 div {
            margin-right: 15px;
        }

        .line1 a {
            /* 不是块级元素，无法设置宽高，须先改性质 */
            text-decoration: underline black 1px;
            padding: 8px;
        }
    </style>
</head>

<body>
    <div class="workplace">
        <div class="row1">
            <input id="nameOrPhone" type="text" placeholder="请输入查询信息" class="input">
            <select name="" id="state">
                <option value="UNKNOWN">意向不明</option>
                <option value="INTENTIONAL">有意向</option>
                <option value="DEALED">成交</option>
            </select>
            <select name="" id="ownerUsername">
            </select>
            <button id="checkout" onclick="loadtable()" class="btn-1">查询</button>
        </div>
        <!-- 此处直接用表格table更合适 -->
        <!-- 表头 -->
        <div class="table1">
            <table>
                <thead>
                    <tr>
                        <th>报备日期</th>
                        <th>客户姓名</th>
                        <th>性别</th>
                        <th>地址</th>
                        <th>联系电话</th>
                        <th>最后联系日期</th>
                        <th>客户来源</th>
                        <th>状态</th>
                        <th>成交日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <!-- 数据区 -->
                <tbody id="body">

                </tbody>
            </table>
        </div>
        <!-- 分页栏 -->
        <div class="line1">
            <div>
                共
                <span>400</span>
                条
            </div>
            <div>
                <select name=" " id="">
                    <option value="">10条/一页</option>
                    <option value="">15条/一页</option>
                    <option value="">20条/一页</option>
                </select>
            </div>
            <div>
                <span>&lt;</span>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <span>&gt;</span>
            </div>
            <div>
                前往第
                <input type="text" style="width: 40px;">
                页
            </div>

        </div>
    </div>

    <script src="jquery-3.6.0.js"></script>


    <script>
        // function loadtable() {
        //     const nameOrPhone = document.querySelector("#nameOrPhone").value;
        //     const state = document.querySelector("#state").value;
        //     const ownerUsername = document.querySelector("#ownerUsername").value;
        //     const size = 10;
        //     const page = 1;
        //     fetch(
        //         `http://localhost:8080/search?nameOrPhone=${nameOrPhone}&state=${state}&ownerUsername=${ownerUsername}&size=${size}&page=${page}`
        //     ).then((response) => {
        //         response.json().then((searchResult) => {
        //             const tbody = document.querySelector("#body");
        //             tbody.innerHTML = "";
        //             for (const customer of searchResult.list) {
        //                 const tr = `
        //   					<tr>
        //                      
        //   						<td>${customer.reportToDate===null ? "无" : customer.reportToDate}</td>
        //   						<td>${customer.name===null ?? "无"}</td>
        //   						<td>${customer.gender===null}</td>
        //   						<td>${customer.address===null ?? "无"}</td>
        //   						<td>${customer.phone===null ?? "无"}</td>
        //   						<td>${customer.lastFollowUpDate===null ?? ""}</td>
        //   						<td>${customer.source===null ?? "无"}</td>
        //   						<td>${customer.state===null ?? "无"}</td>
        //   						<td>${customer.dealDate===null ?? "无"}</td>
        //   						<td><button class="btn btn-sm btn-info">写跟进</button></td>
        //   					</tr>
        //   				`;
        //                 tbody.innerHTML += tr;
        //             }
        //         });
        //     });
        // }


        function loadtable() {
            const nameOrPhone = document.querySelector("#nameOrPhone").value;
            const state = document.querySelector("#state").value;
            const ownerUsername = document.querySelector("#ownerUsername").value;
            const size = 10;
            const page = 1;
            var xhr = new XMLHttpRequest();
            xhr.open("GET", `http://localhost:8080/search?nameOrPhone=${nameOrPhone}&state=${state}&ownerUsername=${ownerUsername}&size=${size}&page=${page}`);
            xhr.setRequestHeader(
                "Content-Type",
                "application/x-www-form-urlencoded"
            );
            xhr.send();
            //  这里使用onreadystatechange函数之后再读取返回体是必须的，是必须的，否则就会报错
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4 && xhr.status === 200) {
                    const searchResult = JSON.parse(xhr.responseText);
                    const tbody = document.querySelector("#body");
                    tbody.innerHTML = "";
                    for (const customer of searchResult.list) {
                        const tr = `
                            	<tr>
           	 					<td>${customer.reportToDate === null ? "无" : customer.reportToDate}</td>
           	 					<td>${customer.name === null ?? "无"}</td>
           	 					<td>${customer.gender === null}</td>
           	 					<td>${customer.address === null ?? "无"}</td>
           	 					<td>${customer.phone === null ?? "无"}</td>
           	 					<td>${customer.lastFollowUpDate === null ?? ""}</td>
           	 					<td>${customer.source === null ?? "无"}</td>
           	 					<td>${customer.state === null ?? "无"}</td>
           	 					<td>${customer.dealDate === null ?? "无"}</td>
           	 					<td><button class="btn btn-sm btn-info">写跟进</button></td>
           	 				</tr>
                              `;
                        tbody.innerHTML += tr;
                    }
                 }
            }


         }

        function headeruserlist() {
            fetch("http://localhost:8080/userlist").then((resp) => {
                resp.json().then((users) => {
                    const select = document.querySelector("select#ownerUsername")
                    for (const user of users) {
                        const option = new Option(user.username, user.username);
                        select.appendChild(option);
                    }
                }
                )
            }
            )

        }
        window.onload = headeruserlist;

    </script>
</body>

</html>